<!-- ApprovalOfBte.vue -->
<template>
  <div class="theBox">
   
    <div class="contener boderSet fen">
       <!-- 面包屑 -->
    <div class="fen">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>教学设备相关审批</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
      <h3>教学设备相关审批记录</h3>
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <!-- 借入 -->
        <el-tab-pane label="借入" name="borrow">
          <el-row>
            <el-col :span="1.5" >
              <el-button type="success" @click="consentToApplyAll">同意</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="danger" @click="allRefuseAnApplication">拒绝</el-button>
            </el-col>
            <el-col :span="4">
              <el-input placeholder="申请人姓名" style="width: 200px;" v-model="searchData.searchName" clearable></el-input>
            </el-col>
            <el-col :span="7.5">
              <div class="block">
                <span class="demonstration">申请时间：</span>
                <el-date-picker v-model="searchData.searchTime" type="daterange" range-separator="-"
                  start-placeholder="开始日期" end-placeholder="结束日期">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="switchHowerborrow">查询</el-button>
            </el-col>
            <el-col :span="2" class="fRight">
              <el-button type="primary" plain>导出excel</el-button>
            </el-col>
          </el-row>

          <!-- 表格 -->
          <div class="boderSet Table">
            <template>
              <el-table :data="borrowData" stripe style="width: 100%" @selection-change="handleSelectionChangeDepartment">
                <el-table-column type="selection" width="50" header-align="center" align="center"
                  disabled="scope.row.aostate == 2">
                </el-table-column>
                <el-table-column label="审批状态" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.state == 0" type="success">已通过</el-tag>
                    <el-tag v-else-if="scope.row.state == 2 || scope.row.state == 4" type="info">审核中</el-tag>
                    <el-tag v-else-if="scope.row.state == 1 || scope.row.state == 3" type="danger">已拒绝</el-tag>
                    <el-tag v-else="scope.row.state == 5" type="warning">已撤回</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="name" label="申请人姓名" header-align="center" align="center"
                  :v-moudel='searchData.searchName'>
                </el-table-column>
                <el-table-column prop="applyTime" label="申请时间" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="leaseTime" label="借用时间" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="predictReturnTime" label="预计归还时间" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop=applyFacilities[0].facilityClassification label="物品名称" header-align="center"
                  align="center">
                </el-table-column>
                <el-table-column label="操作" header-align="center" align="center">
                  <template slot-scope="scope">
                    <!-- 查询 -->
                    <el-button type="info" icon="el-icon-search" @click="queryDetails(scope.row.id)" circle
                      size="mini"></el-button>
                    <!-- 同意 -->
                    <el-button v-if="scope.row.aostate == 0" type="success" icon="el-icon-check" size="mini"
                      disabled>已审核</el-button>
                    <el-button v-else-if="scope.row.aostate == 1" type="danger" icon="el-icon-close" size="mini"
                      disabled>已拒绝</el-button>
                    <el-button v-else-if="scope.row.state == 0" type="success" icon="el-icon-check" size="mini"
                      disabled>已通过</el-button>
                    <el-button v-else="scope.row.aostate == 2" type="success" icon="el-icon-check" circle size="mini"
                      @click="consentToApply(scope.row.id, scope.row.uname, scope.row.state)"></el-button>
                    <!-- 拒绝 -->
                    <el-button v-if="scope.row.aostate == 2 && (scope.row.state == 2 || scope.row.state == 4)"
                      type="danger" icon="el-icon-close"
                      @click="refuseAnApplication(scope.row.id, scope.row.uname, scope.row.state)" circle
                      size="mini"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>

          <!-- 详细信息弹出框 -->
          <el-dialog title="借入申请详情" :visible.sync="loanApplicationDetails1">
            <div>
              <el-col :span="6">
                <span>{{ this.queryData.dataSubmissionTime }}</span>
              </el-col>
              <el-col :span="12">
                <span>{{ this.queryData.dataName }}</span>
              </el-col>
            </div>
            <div>
              <el-table :data="borrowSuData">
                <el-table-column property="applyFacilities[0].facilityClassification" label="分类" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="applyFacilities[0].facilityName" label="名称" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="applyFacilities[0].facilityEncoding" label="编码" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="applyFacilities[0].facilityPrice" label="单价" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="" label="可用数量" header-align="center" align="center"></el-table-column>
                <el-table-column property="applyFacilities[0].facilitySpecification" label="规格" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="applyFacilities[0].facilityStorageSite" label="存放地点" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="applyFacilities[0].borrowNum" label="领用数量" header-align="center"
                  align="center"></el-table-column>
              </el-table>
            </div>
            <el-col :span="12">
              <div class="grid-content bg-purple paddingTop30">借用时间：<span>{{ this.queryData.dataApplicationTime }}</span>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="paddingTop30">
                备注：用于举办的全效活动
              </div>
            </el-col>
            <el-col :span="24">
              <div class="paddingTop30">
                <el-steps :space="200" :active="stepsActive" :finish-status="finishStatus"
                  :process-status="processStatus">
                  <el-step title="已发起申请"></el-step>
                  <el-step title="审核进行中"></el-step>
                  <el-step title="审核已通过"></el-step>
                </el-steps>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="closeQuery">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>

        <!-- 挂失 -->
        <el-tab-pane label="挂失" name="loss">
          <el-row>
            <el-col :span="2">
              <el-button type="success" @click="consentToApplyAll">同意</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="danger" @click="allRefuseAnApplication">拒绝</el-button>
            </el-col>
            <el-col :span="5">
              <el-input placeholder="申请人姓名" style="width: 200px;" v-model="searchData.searchName" clearable></el-input>
            </el-col>
            <el-col :span="8">
              <div class="block">
                <span class="demonstration">挂失时间：</span>
                <el-date-picker v-model="searchData.searchTime" type="date" placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="switchHowerLoss">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" plain>导出excel</el-button>
            </el-col>
          </el-row>

          <!-- 渲染页面列表 -->
          <div class="boderSet Table">
            <template>
              <el-table :data="lossData" stripe style="width: 100%" @selection-change="handleSelectionChangeDepartment">
                <el-table-column type="selection" width="50" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="astate" label="审批状态" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.astate == 0" type="success">已通过</el-tag>
                    <el-tag v-else-if="scope.row.astate == 2 || scope.row.astate == 4" type="info">审核中</el-tag>
                    <el-tag v-else-if="scope.row.astate == 1 || scope.row.astate == 3" type="danger">已拒绝</el-tag>
                    <el-tag v-else="scope.row.astate == 5" type="warning">已撤回</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="uname" label="申请人姓名" width="180" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop=loseListVoList[0].loseTime label="挂失时间" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="loseState" label="挂失类型" header-align="center" align="center">
                </el-table-column>
                <el-table-column label="操作" header-align="center" align="center">
                  <template slot-scope="scope">
                    <!-- 查询 -->
                    <el-button type="info" icon="el-icon-search" size="mini" circle
                      @click="queryDetails(scope.row.id)"></el-button>
                    <!-- 同意 -->
                    <el-button v-if="scope.row.aostate == 0" type="success" icon="el-icon-check" size="mini"
                      disabled>已审核</el-button>
                    <el-button v-else-if="scope.row.aostate == 1" type="danger" icon="el-icon-close" size="mini"
                      disabled>已拒绝</el-button>
                    <el-button v-else-if="scope.row.astate == 0" type="success" icon="el-icon-check" size="mini"
                      disabled>已通过</el-button>
                    <el-button v-else="scope.row.aostate == 2" type="success" icon="el-icon-check" circle size="mini"
                      @click="consentToApply(scope.row.id, scope.row.uname, scope.row.astate)"></el-button>
                    <!-- 拒绝 -->
                    <el-button v-show="scope.row.aostate == 2" type="danger" icon="el-icon-close" size="mini" circle
                      @click="refuseAnApplication(scope.row.id, scope.row.uname, scope.row.astate)"
                      :data-id="scope.row.id"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>

          <!-- 详细信息弹出框 -->
          <el-dialog title="挂失申请详情" :visible.sync="loanApplicationDetails2">
            <div>
              <el-col :span="6">
                <span>{{ this.queryData.dataSubmissionTime }}</span>
              </el-col>
              <el-col :span="12">
                <span>{{ this.queryData.dataName }}</span>
              </el-col>

            </div>
            <div>
              <el-table :data="lossSuData" style="">
                <el-table-column property="loseState" label="分类 " header-align="center" align="center"></el-table-column>
                <el-table-column property="loseListVoList[0].facilityName" label="名称" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="loseListVoList[0].facilityEncoding" label="编码" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="loseListVoList[0].facilityPrice" label="单价" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="loseListVoList[0].facilitySpecification" label="规格" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="loseListVoList[0].loseNum" label="挂失数量" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="loseListVoList[0].loseTime" label="挂失时间" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="loseListVoList[0].loseCause" label="挂失原因" header-align="center"
                  align="center"></el-table-column>
              </el-table>
            </div>
            <el-col :span="12">
              <div class="grid-content bg-purple paddingTop30">申请时间：<span>{{ this.queryData.dataApplicationTime }}</span>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="paddingTop30">
                备注：用于举办的全效活动
              </div>
            </el-col>
            <el-col :span="24">
              <div class="paddingTop30">
                <el-steps :space="200" :active="stepsActive" :finish-status="finishStatus"
                  :process-status="processStatus">
                  <el-step title="已发起申请"></el-step>
                  <el-step title="审核进行中"></el-step>
                  <el-step title="审核已通过"></el-step>
                </el-steps>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="closeQuery">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>

        <!-- 报修 -->
        <el-tab-pane label="报修" name="repairs">
          <el-row>
            <el-col :span="2">
              <el-button type="success" @click="consentToApplyAll">同意</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="danger" @click="allRefuseAnApplication">拒绝</el-button>
            </el-col>
            <el-col :span="5">
              <el-input placeholder="申请人姓名" style="width: 200px;" v-model="searchData.searchName" clearable></el-input>
            </el-col>
            <el-col :span="8">
              <div class="block">
                <span class="demonstration">报修时间：</span>
                <el-date-picker v-model="searchData.searchTime" type="date" placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="switchHowerRepairs">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" plain>导出excel</el-button>
            </el-col>
          </el-row>

          <div class="boderSet Table">
            <template>
              <el-table :data="repairsData" stripe style="width: 100%" @selection-change="handleSelectionChangeDepartment">
                <el-table-column type="selection" width="50" header-align="center" align="center"
                  disabled="scope.row.aostate == 2">
                </el-table-column>
                <el-table-column label="审批状态" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.astate == 0" type="success">已通过</el-tag>
                    <el-tag v-else-if="scope.row.astate == 2 || scope.row.astate == 4" type="info">审核中</el-tag>
                    <el-tag v-else-if="scope.row.astate == 1 || scope.row.astate == 3" type="danger">已拒绝</el-tag>
                    <el-tag v-else="scope.row.astate == 5" type="warning">已撤回</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="uname" label="申请人姓名" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="facilityTime" label="报修时间" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop=repairsListVos[0].facilityName label="报修物品" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop=repairsListVos[0].maintainExpend label="修理花销" header-align="center" align="center">
                </el-table-column>
                <el-table-column label="操作" header-align="center" align="center">
                  <template slot-scope="scope">
                    <!-- 查询 -->
                    <el-button type="info" icon="el-icon-search" circle @click="queryDetails(scope.row.id)"
                      :data-id="scope.row.id" size="mini"></el-button>
                    <!-- 同意 -->
                    <el-button v-if="scope.row.aostate == 0" type="success" icon="el-icon-check" size="mini"
                      disabled>已审核</el-button>
                    <el-button v-else-if="scope.row.aostate == 1" type="danger" icon="el-icon-close" size="mini"
                      disabled>已拒绝</el-button>
                    <el-button v-else-if="scope.row.astate == 0" type="success" icon="el-icon-check" size="mini"
                      disabled>已通过</el-button>
                    <el-button v-else="scope.row.aostate == 2" type="success" icon="el-icon-check" circle size="mini"
                      @click="consentToApply(scope.row.id, scope.row.uname, scope.row.astate)"></el-button>
                    <!-- 拒绝 -->
                    <el-button v-show="scope.row.aostate == 2" type="danger" icon="el-icon-close" circle
                      @click="refuseAnApplication(scope.row.id, scope.row.uname, scope.row.astate)"
                      :data-id="scope.row.id" size="mini"></el-button>

                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>

          <!-- 详细信息弹出框 -->
          <el-dialog title="报修申请详情" :visible.sync="loanApplicationDetails3">
            <div>
              <el-col :span="6">
                <span>{{ this.queryData.dataSubmissionTime }}</span>
              </el-col>
              <el-col :span="12">
                <span>{{ this.queryData.dataName }}</span>
              </el-col>

            </div>
            <div>
              <el-table :data="repairsSuData">
                <el-table-column property="repairsListVos[0].facilityName" label="分类" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="repairsListVos[0].facilityClassification" label="名称" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="repairsListVos[0].facilityEncoding" label="编码" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="repairsListVos[0].facilityPrice" label="单价" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="facilityTime" label="报修时间" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="repairsListVos[0].repairsDesc" label="故障原因" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="repairsListVos[0].maintainTime" label="维修时间" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="repairsListVos[0].maintainExpend" label="维修金额" header-align="center"
                  align="center"></el-table-column>
              </el-table>
            </div>
            <el-col :span="12">
              <div class="grid-content bg-purple paddingTop30">报修时间：<span>{{ this.queryData.dataApplicationTime }}</span>
              </div>
            </el-col>
            <el-col :span="24">
              <div class="paddingTop30">
                备注：用于2017年11月16日举办的全效活动
              </div>
            </el-col>
            <el-col :span="24">
              <div class="paddingTop30">
                <el-steps :space="200" :active="stepsActive" :finish-status="finishStatus"
                  :process-status="processStatus">
                  <el-step title="已发起申请"></el-step>
                  <el-step title="审核进行中"></el-step>
                  <el-step title="审核已通过"></el-step>
                </el-steps>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="closeQuery">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>

        <!-- 报废 -->
        <el-tab-pane label="报废" name="scrap">
          <el-row>
            <el-col :span="2">
              <el-button type="success" @click="consentToApplyAll">同意</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="danger" @click="allRefuseAnApplication">拒绝</el-button>
            </el-col>
            <el-col :span="3">
              <el-input placeholder="申请人姓名" style="width: 200px;" v-model="searchData.searchName" clearable></el-input>
            </el-col>
            <el-col :span="8">
              <div class="block">
                <span class="demonstration">报废时间：</span>
                <el-date-picker v-model="searchData.searchTime" type="date" placeholder="选择日期">
                </el-date-picker>
              </div>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" @click="switchHoverScrap">查询</el-button>
            </el-col>
            <el-col :span="2">
              <el-button type="primary" plain>导出excel</el-button>
            </el-col>
          </el-row>
          <div class="boderSet Table">
            <template>
              <el-table :data="scrapData" stripe style="width: 100%" @selection-change="handleSelectionChangeDepartment">
                <el-table-column type="selection" width="50">
                </el-table-column>
                <el-table-column prop="" label="审批状态" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-tag v-if="scope.row.astate == 0" type="success">已通过</el-tag>
                    <el-tag v-else-if="scope.row.astate == 2 || scope.row.astate == 4" type="info">审核中</el-tag>
                    <el-tag v-else-if="scope.row.astate == 1 || scope.row.astate == 3" type="danger">已拒绝</el-tag>
                    <el-tag v-else="scope.row.astate == 5" type="warning">已撤回</el-tag>
                  </template>
                </el-table-column>
                <el-table-column prop="uname" label="申请人姓名" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop=scrapListVos[0].facilityTime label="入库时间" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop="scrapTime" label="报废时间" header-align="center" align="center">
                </el-table-column>
                <el-table-column prop=scrapListVos[0].scrapDesc label="报废原因" header-align="center" align="center">
                </el-table-column>
                <el-table-column label="操作" header-align="center" align="center">
                  <template slot-scope="scope">
                    <!-- 查询 -->
                    <el-button type="info" icon="el-icon-search" circle @click="queryDetails(scope.row.id)"
                      :data-id="scope.row.id" size="mini"></el-button>
                    <!-- 同意 -->
                    <el-button v-if="scope.row.aostate == 0" type="success" icon="el-icon-check" size="mini"
                      disabled>已审核</el-button>
                    <el-button v-else-if="scope.row.aostate == 1" type="danger" icon="el-icon-close" size="mini"
                      disabled>已拒绝</el-button>
                    <el-button v-else-if="scope.row.astate == 0" type="success" icon="el-icon-check" size="mini"
                      disabled>已通过</el-button>
                    <el-button v-else="scope.row.aostate == 2" type="success" icon="el-icon-check" circle size="mini"
                      @click="consentToApply(scope.row.id, scope.row.uname, scope.row.astate)"></el-button>
                    <!-- 拒绝 -->
                    <el-button v-show="scope.row.aostate == 2" type="danger" icon="el-icon-close" circle
                      @click="refuseAnApplication(scope.row.id, scope.row.uname, scope.row.astate)"
                      :data-id="scope.row.id" size="mini"></el-button>
                  </template>
                </el-table-column>
              </el-table>
            </template>
          </div>

          <!-- 详细信息弹出框 -->
          <el-dialog title="报废申请详情" :visible.sync="loanApplicationDetails4">
            <div>
              <el-col :span="6">
                <span>{{ this.queryData.dataSubmissionTime }}</span>
              </el-col>
              <el-col :span="12">
                <span>{{ this.queryData.dataName }}</span>
              </el-col>

            </div>
            <div>
              <el-table :data="scrapSuData">
                <el-table-column property="scrapListVos[0].facilityName" label="分类" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="scrapListVos[0].facilityName" label="名称" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="scrapListVos[0].facilityEncoding" label="编码" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="scrapListVos[0].facilityPrice" label="单价" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="scrapListVos[0].facilityTime" label="入库时间" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="scrapListVos[0].scrapTime" label="报废时间" header-align="center"
                  align="center"></el-table-column>
                <el-table-column property="scrapListVos[0].scrapDesc" label="报废原因" header-align="center"
                  align="center"></el-table-column>
              </el-table>
            </div>
            <el-col :span="24">
              <div class="paddingTop30">
                备注：用于的全校活动
              </div>
            </el-col>
            <el-col :span="24">
              <div class="paddingTop30">
                <el-steps :space="200" :active="stepsActive" :finish-status="finishStatus"
                  :process-status="processStatus">
                  <el-step title="已发起申请"></el-step>
                  <el-step title="审核进行中"></el-step>
                  <el-step title="审核已通过"></el-step>
                </el-steps>
              </div>
            </el-col>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="closeQuery">确 定</el-button>
            </div>
          </el-dialog>
        </el-tab-pane>

      </el-tabs>



      <!-- 拒绝弹出框 -->
      <el-dialog title="拒绝" :visible.sync="dialogFormVisible">
        <el-form :model="form">
          <el-form-item label="拒绝原因" :label-width="formLabelWidth">
            <el-input type="textarea" :rows="4" v-model="form.case" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="refuseCancle">取 消</el-button>
          <el-button type="primary" @click="refusePut">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 批量拒绝弹出框 -->
      <el-dialog title="拒绝" :visible.sync="dialogFormVisibleAll">
        <el-form :model="form">
          <el-form-item label="拒绝原因" :label-width="formLabelWidth">
            <el-input type="textarea" :rows="4" v-model="form.case" autocomplete="off"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="refuseCancle">取 消</el-button>
          <el-button type="primary" @click="allRefusePut">确 定</el-button>
        </div>
      </el-dialog>

      <!-- 分页 -->
      <div class="fRight ">
        <el-footer>
          <el-pagination background layout="prev, pager, next" @current-change="pageChange" :current-page="page"
            :page-size="limit" :total="count" pager-count="6">
          </el-pagination>
        </el-footer>
      </div>







    </div>
  </div>
</template>
<script>
import Serive from "../../serive/ApprovalOfBteSerive";
export default {
  data() {
    return {
      activeName: 'borrow',

      dialogFormVisible: false,
      dialogFormVisibleAll: false,
      loanApplicationDetails1: false,
      loanApplicationDetails2: false,
      loanApplicationDetails3: false,
      loanApplicationDetails4: false,

      form: [{//拒绝
        id: '',
        case: '',
        name: '',
        state: '',
      }],

      formLabelWidth: '120px',

      borrowData: [],//借入数据
      borrowSuData: [],
      lossData: [],//挂失数据
      lossSuData: [],
      repairsData: [],//报修
      repairsSuData: [],
      scrapData: [],//报废
      scrapSuData: [],//报废

      //页码
      limit: 10,
      page: 1,

      finishStatus: "process",//结束步骤条状态
      processStatus: "process",//当前步骤条状态
      stepsActive: "",//步骤条进度
      astate: "",//审批状态

      count: 0,
      //搜索数据
      searchData: [{
        searchName: "",
        searchTime: '',
      }],
      //查看详情表
      queryData: [{
        //提交时间
        dataSubmissionTime: "",
        //申请人
        dataName: "",
        //申请时间
        dataApplicationTime: "",
        //审核状态
        dataState: ""
      }],
      checkboxData: [],
      refuseData: [],//拒绝数据
      agreeData: [],//同意数据
      recallData: [],//已撤回数据
      operabilityData: [],//可操作数据
      stateDate: [],//状态数据
      bulkConsent:[],//批量同意数据

    }
  },
  methods: {
    //分页
    //显示当前页码
    pageChange(newPage) {
      this.page = newPage;
      console.log('当前页码：', newPage);
      if (this.activeName == 'borrow') {
        this.switchHowerborrow()
      } else if (this.activeName == 'loss') {
        console.log(123);
        this.switchHowerLoss()
      } else if (this.activeName == 'repairs') {
        this.switchHowerRepairs()
      } else {
        this.switchHoverScrap()
      }
      // :total="total" @current-change="pageChange2" :current-page="page" :page-size="limit"
    },
    //标签页切换
    handleClick(tab, event) {
      console.log(tab, event);
      if (tab.index == 0) {
        //网络请求渲染借入数据 
        this.input = ''
        this.searchTime = ''
        this.page = 1
        this.checkboxData = ''
        this.switchHowerborrow()
      } else if (tab.index == 1) {
        //网络请求渲染挂失数据 
        this.input = ''
        this.searchTime = ''
        this.page = 1
        this.checkboxData = ''
        this.switchHowerLoss()
      } else if (tab.index == 2) {
        //网络请求渲染报修数据
        this.input = ''
        this.searchTime = ''
        this.page = 1
        this.checkboxData = ''
        this.switchHowerRepairs()
      } else {
        //网络请求渲染报废数据
        this.input = ''
        this.searchTime = ''
        this.page = 1
        this.checkboxData = ''
        this.switchHoverScrap()
      }
    },
    //渲染借入数据
    switchHowerborrow() {
      let aoid = this.aoId
      let limit = this.limit
      let page = this.page
      let name = this.input
      console.log(aoid);
      Serive.applyList(aoid, limit, page, name).then((res) => {//借入数据
        // console.log(res.data);
        this.borrowData = res.data.data
        // console.log(this.borrowData);
        this.count = res.data.count
        // console.log(res.data.data);

      })
    },
    //渲染挂失数据
    switchHowerLoss() {
      let aoid = this.aoId
      let limit = this.limit
      let page = this.page
      let name = this.input
      let loseData = this.searchTime
      // console.log(name);
      console.log(aoid);

      Serive.applyLose(aoid, limit, page, name, loseData).then((res) => {//挂失数据
        // console.log(res.data.data);
        this.lossData = res.data.data
        this.count = res.data.count
        // console.log(this.count);
      })
    },
    //渲染报修数据
    switchHowerRepairs() {
      let aoid = this.aoId
      let limit = this.limit
      let page = this.page
      let name = this.input
      console.log(aoid);

      Serive.applyRepairs(aoid, limit, page, name).then((res) => {//报修数据
        // console.log(res.data);
        this.repairsData = res.data.data
        this.count = res.data.count
        // console.log(this.repairsData);
      })
    },
    //渲染报废数据
    switchHoverScrap() {
      let aoid = this.aoId
      let limit = this.limit
      let page = this.page
      let name = this.input
      console.log(aoid);

      Serive.applyScrap(aoid, limit, page, name).then((res) => {//报废数据
        // console.log(res.data);
        this.scrapData = res.data.data
        this.count = res.data.count
        // console.log(this.scrapData);
      })
    },
    //判断步骤条状态
    checkStepBarStatus(state) {
      // finishStatus: "process",//步骤条状态
      // stepsActive:"",//步骤条进度
      //wait / process / finish / error / success
      if (state == 0) {
        this.finishStatus = "success"
        this.stepsActive = 3
        this.processStatus = "success"
      } else if (state == 2 || state == 4) {
        this.finishStatus = "success"
        this.stepsActive = 1
        this.processStatus = "process"
      } else if (state == 1 || state == 3) {
        this.finishStatus = "error"
        this.stepsActive = 3
      } else {
        this.finishStatus = "wait"
        this.stepsActive = -1
      }
      // console.log(this.queryData.dataSubmissionTime);
      // console.log(this.queryData);
    },
    //查询数据
    queryDetails(id) {
      //详情模态框显示
      if (this.activeName == 'borrow') {
        // console.log(this.borrowData);
        this.loanApplicationDetails1 = true;
        for (let i in this.borrowData) {
          if (this.borrowData[i].id == id) {
            console.log(id);
            this.borrowSuData.push(this.borrowData[i])
            console.log(this.borrowSuData);
            this.queryData.dataSubmissionTime = this.borrowSuData[0].applyTime
            this.queryData.dataName = this.borrowSuData[0].name
            this.queryData.dataApplicationTime = this.borrowSuData[0].leaseTime
            this.queryData.dataState = this.borrowSuData[0].state
            this.checkStepBarStatus(this.queryData.dataState)
            return
          }
        }

      } else if (this.activeName == 'loss') {
        this.loanApplicationDetails2 = true;
        console.log(123);
        for (let i in this.lossData) {
          // console.log(122);
          if (this.lossData[i].id == id) {
            // console.log(this.lossData[i]);
            this.lossSuData.push(this.lossData[i])
            console.log(this.lossSuData);
            this.queryData.dataSubmissionTime = this.lossSuData[0].loseListVoList[0].loseTime
            this.queryData.dataName = this.lossSuData[0].uname
            this.queryData.dataApplicationTime = this.lossSuData[0].loseListVoList[0].loseTime
            this.queryData.dataState = this.lossSuData[0].astate
            this.checkStepBarStatus(this.queryData.dataState)
            return
          }
        }
      } else if (this.activeName == 'repairs') {
        this.loanApplicationDetails3 = true;

        for (let i in this.repairsData) {
          if (this.repairsData[i].id == id) {
            this.repairsSuData.push(this.repairsData[i])
            // console.log(this.repairsSuData[0]);
            this.queryData.dataSubmissionTime = this.repairsSuData[0].facilityTime
            this.queryData.dataName = this.repairsSuData[0].uname
            this.queryData.dataApplicationTime = this.repairsSuData[0].repairsListVos[0].maintainTime
            this.queryData.dataState = this.repairsSuData[0].astate
            console.log(this.queryData.dataState);
            this.checkStepBarStatus(this.queryData.dataState)
            return
          }
        }
      } else {
        this.loanApplicationDetails4 = true;

        for (let i in this.scrapData) {
          if (this.scrapData[i].id == id) {
            this.scrapSuData.push(this.scrapData[i])
            // console.log(this.lossSuData[0].loseListVoList[0].facilityName);
            this.queryData.dataSubmissionTime = this.scrapSuData[0].scrapTime
            this.queryData.dataName = this.scrapSuData[0].uname
            this.queryData.dataApplicationTime = this.scrapSuData[0].scrapListVos[0].facilityTime
            this.queryData.dataState = this.scrapSuData[0].astate
            console.log(this.queryData.dataState);
            this.checkStepBarStatus(this.queryData.dataState)
            return
          }
        }
      }
    },

    //同意                                
    consentToApply(id, name, state) {
      this.$confirm(`是否同意 ${name} 的申请?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let agreeData = [{id,state}]
        Serive.applyAgree(agreeData).then((res) => {
          console.log(res);
          if (this.activeName == 'borrow') {
            this.switchHowerborrow()
          } else if (this.activeName == 'loss') {
            console.log(123);
            this.switchHowerLoss()
          } else if (this.activeName == 'repairs') {
            this.switchHowerRepairs()
          } else {
            this.switchHoverScrap()
          }
        })
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
    },

    //批量同意
    consentToApplyAll() {
      if (this.checkboxData.length == 0) {
        this.$message.error("您还没有勾选申请");
      } else {
        this.$confirm(`是否同意 ${name} 的申请?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let agreeData = this.bulkConsent
        Serive.applyAgree(agreeData).then((res) => {
          console.log(res);
          if (this.activeName == 'borrow') {
            this.switchHowerborrow()
          } else if (this.activeName == 'loss') {
            console.log(123);
            this.switchHowerLoss()
          } else if (this.activeName == 'repairs') {
            this.switchHowerRepairs()
          } else {
            this.switchHoverScrap()
          }
        })
        this.$message({
          type: 'success',
          message: '操作成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消操作'
        });
      });
      }
      // bulkConsent
      
    },
    //拒绝
    refuseAnApplication(id, name, state) {
      this.dialogFormVisible = true
      // console.log( id );
      this.form.id = id
      this.form.name = name
      this.form.state = state
    },

    //批量拒绝
    allRefuseAnApplication() {
      if (this.checkboxData.length == 0) {
        this.$message.error("您还没有勾选申请");
      } else {
        this.dialogFormVisibleAll = true
      }
    },

    //拒绝提交
    refusePut() {
      let name = this.form.name
      let id =[]
       id.push(this.form.id) 
       console.log(id);
      var refuseCause = this.form.case
      console.log(refuseCause);
      if (this.form.case == '' || this.form.case == undefined) {
        this.$message.error('请输入拒绝原因');
      } else {
        this.$confirm(`是否拒绝 ${name} 的申请?`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          Serive.applyRefuse(id, refuseCause).then((res) => {
            // console.log(111);
            if (this.activeName == 'borrow') {
              this.switchHowerborrow()
            } else if (this.activeName == 'loss') {
              console.log(123);
              this.switchHowerLoss()
            } else if (this.activeName == 'repairs') {
              this.switchHowerRepairs()
            } else {
              this.switchHoverScrap()
            }
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.dialogFormVisible = false
            this.form.id = ''
            this.form.case = ''
          })

        })
      }

    },

    //批量拒绝提交
    allRefusePut() {
      let ids =[]
       ids = this.operabilityData
       console.log(id);
      var refuseCause = this.form.case
      console.log(refuseCause);
      if (this.form.case == '' || this.form.case == undefined) {
        this.$message.error('请输入拒绝原因');
      } else {
        this.$confirm('是否批拒绝申请?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          Serive.applyRefuse(ids, refuseCause).then((res) => {
            // console.log(111);
            if (this.activeName == 'borrow') {
              this.switchHowerborrow()
            } else if (this.activeName == 'loss') {
              console.log(123);
              this.switchHowerLoss()
            } else if (this.activeName == 'repairs') {
              this.switchHowerRepairs()
            } else {
              this.switchHoverScrap()
            }
            this.$message({
              type: 'success',
              message: '操作成功!'
            });
            this.dialogFormVisible = false
            this.form.id = ''
            this.form.case = ''
          })

        })
      }
      
    },

    //拒绝取消
    refuseCancle() {
      this.$message('已取消操作')
      this.dialogFormVisible = false
      this.dialogFormVisibleAll = false
      this.form.id = ''
      this.form.case = ''
    },

    //查看详情模态框确认
    closeQuery() {
      if (this.activeName == 'borrow') {
        this.loanApplicationDetails1 = false;
        this.borrowSuData = []
      } else if (this.activeName == 'loss') {
        this.loanApplicationDetails2 = false;
        console.log(123);
        this.lossSuData = []
      } else if (this.activeName == 'repairs') {
        this.loanApplicationDetails3 = false;
        this.repairsSuData = []
      } else {
        this.loanApplicationDetails4 = false;
        this.scrapSuData = []
      }
    },

    //多选框数据
    handleSelectionChangeDepartment(val) {
      this.checkboxData = val;
      console.log(val);
      // refuseData:[],//拒绝数据
      // agreeData:[],//同意数据
      // recallData:[],//已撤回数据
      // operabilityData:[]//可操作数据
      for (let i in this.checkboxData) {
        if (this.checkboxData[i].astate == 0 ||
          this.checkboxData[i].state == 0) {
          this.agreeData.push(this.checkboxData[i].id)
        } else if (this.checkboxData[i].astate == 1 || this.checkboxData[i].astate == 3 ||
          this.checkboxData[i].state == 1 || this.checkboxData[i].state == 3) {
          this.refuseData.push(this.checkboxData[i].id)
        } else if (this.checkboxData[i].astate == 5 ||
          this.checkboxData[i].state == 5) {
          this.recallData.push(this.checkboxData[i].id)
        } else if (this.checkboxData[i].aostate == 2) {
          this.operabilityData.push(this.checkboxData[i].id)
          this.stateDate.push(this.checkboxData[i].state || this.checkboxData[i].astate)
          this.bulkConsent.push({id:this.checkboxData[i].id,state:this.checkboxData[i].state || this.checkboxData[i].astate})

        }
      }
    }

  },
  computed: {
    aoId() {
      return localStorage.getItem('uid');
    }
  },
  created() {//加载时创建
    this.switchHowerborrow()
  },
  mounted: {


  },
}
</script>
<style scoped>
.theBox {
  overflow-y: auto;
  /* height: 600px; */
  width: 100%;
  overflow: hidden;
  padding: 30px;  
}

.contener {
  margin: 20px 30px;
  padding: 30px 30px 0;
  overflow: hidden;
}

.boderSet {
  border-radius: 10px !important;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.Table {
  margin: 20px 0;
  margin-bottom: 20px;
  background-color: white;
  padding: 5px;

}

.yuanjiao {
  background-color: white;
  padding: 30px;
}

.paddingTop30 {
  padding-top: 30px;
}

.fRight {
  float: right;
}


.fen {
  margin: 0 0 15px 0;
}
.el-button{
  margin-right: 15px;
}
</style>




